<template>
    <div class="meetingstatus">

        <el-table :data="tableData" style="width: 100%;height: 100%;">
            <el-table-column prop="date" label="日期" width="150" />
            <el-table-column prop="name" label="预约人" width="200" />
            <el-table-column prop="time" label="时间" width="150" />
            <el-table-column prop="status" label="状态" width="150" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button  type="primary"  @click.prevent="booking(scope.$index)">
                        一键会议
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup>
import { useRoute } from 'vue-router';
import { ref, onMounted, onUnmounted } from 'vue';
import { ElMessage } from 'element-plus';
import { getBooking, OneClickOn } from '../apis/projectApis/index';
const route = useRoute()
const twinID = ref("")
const tableData = ref([])
const timer = ref(); // 定时器
let count = ref(0); // 倒计时
const getTwinBooking = async () => {
    let res = await getBooking({
        twinID: twinID.value
    })
    console.log(res)
    if (res.data.code == 200) {
        tableData.value = res.data.data
        count.value = 6
        Verification()
    }
}
const booking = async (index) => {
    let res = await OneClickOn({
        twinID: twinID.value,
        fullTime: tableData.value[index].fullTime
    })
    console.log(res)
    if (res.data.code == 200) {
        ElMessage.success({
            message: "一键会议模式成功",
        })
    }
}
//循环请求接口
const Verification = () => {
    timer.value = setInterval(() => {
        if (count.value > 0 && count.value <= 6) {
            // loading.value = false
            count.value--;
        } else if (count.value === 0) {
            getTwinBooking();// 请求数据 
            clearInterval(timer.value);
            timer.value = null;
        }
    }, 1000);
};
onMounted(() => {
    twinID.value = route.query.id
    getTwinBooking()
})
onUnmounted(() => {
    clearInterval(timer.value);
    timer.value = null;
})

</script>

<style lang="scss" scoped>
.meetingstatus {
    width: 800px;
    min-height: 600px;
    box-sizing: border-box;

    .title {
        font-size: 25px;
        color: #007bff;
        margin-bottom: 20px;
    }
}

.cell-item {
    display: flex;
    align-items: center;
}

.margin-top {
    margin-top: 20px;
}

.my-label {
    background: var(--el-color-success-light-9);
}

.my-content {
    background: var(--el-color-danger-light-9);
}
</style>